<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style>
		body{font-size:9pt;}
		#panel{ width:600px; height:300px; border:1px solid #999; position:relative; }
		#bar{ position:absolute; left:50px;	top:190px; width:500px; height:20px; background:#F30; }
		#img1{ position:absolute; left:50px; top:120px;	}
		#nav{ text-align:center; width:600px; }
		img{
			/*-webkit-transform: scaleX(-1);*/
			/*-moz-transform: scaleX(-1);*/
			/*-o-transform: scaleX(-1);*/
			/*-ms-transform: scaleX(-1);*/
			/*transform: scaleX(-1);*/
		}
	</style>
	<script type="text/javascript" src="./js/test04.js"></script>
	<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="./js/jquery.flip.min.js"></script>
</head>

<body>	
	<div>
		<div id="count">0</div>
		<h4>#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.</h4>
		<div id="panel">
			<div id="bar"> </div>
			<div id="img1">
				<img src="./img/fish.png" style="filter:FlipH" >
			</div>
		</div>
		<div id="nav">
			<button id="btn_start">시작</button>
			<button id="btn_stop">멈춤</button>
		</div>
	</div>       
</body>
</html>
